<template>
  <div style="display: inline-block" class='flex items-center' @click='visible=true'>
    <el-popover
      placement="bottom"
      width="200"
      :visible='visible'
      trigger="click"
      content="this is content, this is content, this is content"
    >
      <template #reference>
        <span :style='{color: filter ? $store.state.filterFontColor : ""}'>{{ tableStyleRecord.cn }}</span>
      </template>
      <section>
        <!-- 字符串模糊查询 -->
        <div v-if='tableStyleRecord.filter === constant.filter.fuzzyString'>
          <el-input v-model='inputVal'></el-input>
        </div>

        <!-- 单选 -->
        <div v-if='tableStyleRecord.filter === constant.filter.singleSelect'>
          <el-input v-model='inputVal' @change='onChange'></el-input>
          <el-radio-group v-model="singleVal" class="ml-4" style='overflow-y: scroll;overflow-x: hidden;height: 200px' size='default'>
            <template v-for='(item, index) in options' :key='item'>
              <el-radio :label="item" size="small">{{ item }}</el-radio>
            </template>
          </el-radio-group>
        </div>

        <!-- 多选 -->
        <div v-if='tableStyleRecord.filter === constant.filter.multSelect'>
          <el-input v-model='inputVal' @change='onChange'></el-input>
          <el-checkbox-group v-model="multArray">
            <template v-for='(item, index) in options' :key='item'>
              <el-checkbox :label="item" />
            </template>
          </el-checkbox-group>
        </div>

        <div class='flex items-center justify-end mt-2'>
          <el-button size='small' text @click='handleCancel'>清除过滤</el-button>
          <el-button type='primary' size='default' @click='handleConfirm'>确定</el-button>
        </div>
      </section>
    </el-popover>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { constant } from '~/utils/globalv'


const props = defineProps({
  tableStyleRecord: {
    type: Object,
    required: true
  },
  optionArray: {// 单选或者多选的带选项数组
    type: Array,
    default: []
  }
})

const optionsAll = props.optionArray
const options = ref(props.optionArray)
const multArray = ref([])
const singleVal = ref()
const visible = ref(false)
const inputVal = ref('')
const emits = defineEmits(['confirm', 'cancel'])
const filter = ref(false)
const handleConfirm = () => {
  if(props.tableStyleRecord.filter === constant.filter.fuzzyString){
    if(inputVal.value.length === 0) {
      filter.value = false
    }else{
      emits('confirm', props.tableStyleRecord, inputVal.value)
      filter.value = true
    }
  }

  if(props.tableStyleRecord.filter === constant.filter.singleSelect){
    if(singleVal.value.length === 0){
      filter.value = false
    }else{
      emits('confirm', props.tableStyleRecord, singleVal.value)
      filter.value = true
    }
  }

  if(props.tableStyleRecord.filter === constant.filter.multSelect){
    if(multArray.length === 0) {
      filter.value = false
    }else{
      const ret = []
      for (const item of multArray.value) {
        ret.push(item)
      }
      emits('confirm', props.tableStyleRecord, ret)
      filter.value = true
    }
  }

  visible.value = false
}

const handleCancel = () => {
  emits('cancel', props.tableStyleRecord.fieldName)
  filter.value = false
  visible.value = false
  inputVal.value = ''
  singleVal.value = ''
  multArray.value = []
  options.value = optionsAll
}

const onChange = () => {
  options.value = optionsAll.filter(item => item.indexOf(inputVal.value) >= 0 ? true : false)
}


// setTimeout(() => {
//   console.log('filterHeader延迟打印optionsArray', props.optionArray)
// },2000)
</script>
<style>
  :deep() .el-radio-group{
    margin-bottom: 1px;
  }
</style>